<template>
<div class="confusion-matrix">
    <ve-heatmap :data-empty="chartData.rows.length===0" width="100%" height="350px" :extend="chartExtend" :legend-visible="false" :visual-map="visualMap" :data="chartData" :settings="chartSettings"></ve-heatmap>
</div>
</template>

<script>
import {
    mapGetters,
    mapMutations
} from 'vuex'
export default {
    name: 'ConfusionMatrix',
    computed: {
        ...mapGetters({
            probability: 'common/getProbability',
            sample: 'common/getSample',
            modelDetail: 'common/getModelDetail',
            type: 'common/getType'
        })
    },
    data () {
        this.chartSettings = {
            xAxisList: ['模型预测(正)', '模型预测(负)', '总数'],
            yAxisList: ['总数', '实际值(负)', '实际值(正)']
        }
        this.visualMap = {
            type: 'piecewise',
            show: false,
            dimension: 2,
            pieces: []
        }
        this.chartExtend = {
            series: {
                showSymbol: false,
                label: {
                    normal: {
                        show: true,
                        formatter: ({ value }) => {
                            let v1 = value[3] === '-' ? 0 : value[3]
                            let v2 = value[4] === '-' ? 0 : value[4]
                            return `${v1}    ${v2}`
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                tooltip: {
                    show: false
                }
            },
            xAxis: {
                position: 'top'
            }
        }
        return {
            arr: [],
            obj: {},
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        ...mapMutations({
            setEvaluationData: 'common/setEvaluationData'
        }),
        init () {
            const data = this.modelDetail.summary.evaSummary
            this.obj = data.metricsOverview
            this.arr = JSON.parse(JSON.stringify(data.scoreAndConfusion))
            this.getData(0.5)
        },
        getData (val) {
            const getM = (val) => {
                if (val > this.arr[0][0]) {
                    return [val, 0, 0]
                } else {
                    let res = this.arr.filter(v => v[0] >= val)
                    return res[res.length - 1]
                }
            }
            let m = [val, 0, 0]
            if (this.type === 0) {
                m = getM(val)
            }
            if (this.type === 1) {
                let s = this.obj.totalSample
                let p = ((this.arr[0][1] + this.arr[0][2]) / s).toFixed(4)
                if (val < p) {
                    m = [val, 0, 0]
                } else {
                    let res = this.arr.filter(v => {
                        let y = ((v[1] + v[2]) / s).toFixed(4)
                        return y <= val
                    })
                    m = res[res.length - 1]
                }
                m = getM(1 - m[0])
            }
            let t = this.obj.totalSample
            let p = this.obj.positiveSample
            let n = this.obj.negativeSample
            let TP = m[1]
            let FP = m[2]
            let FN = p - TP
            let TN = n - FP
            let postT = TP + FP
            let postN = FN + TN
            let data = {
                TP,
                FN,
                FP,
                TN,
                postN
            }
            const getP = (val) => {
                let v = (100 * val / t).toFixed(2)
                return `${v}%`
            }
            this.visualMap.pieces = [
                { value: '0', color: '#3F9EFF' },
                { value: '1', color: '#2CC0DE' },
                { value: '2', color: '#80D9EB' },
                { value: '3', color: '#2CC0DE' },
                { value: '4', color: '#3F9EFF' },
                { value: '5', color: '#80D9EB' },
                { value: '6', color: '#8CC5FF' },
                { value: '7', color: '#8CC5FF' },
                { value: '8', color: '#ddd' }
            ]
            this.chartData = {
                columns: ['x', 'y', 'value', 'hehe', '占比'],
                rows: [{
                        'x': '模型预测(正)',
                        'y': '实际值(正)',
                        'hehe': TP,
                        '占比': getP(TP),
                        'value': '0'
                    },
                    {
                        'x': '模型预测(正)',
                        'y': '实际值(负)',
                        'hehe': FP,
                        '占比': getP(FP),
                        'value': '1'
                    },
                    {
                        'x': '模型预测(正)',
                        'y': '总数',
                        'hehe': postT,
                        '占比': getP(postT),
                        'value': '2'
                    },
                    {
                        'x': '模型预测(负)',
                        'y': '实际值(正)',
                        'hehe': FN,
                        '占比': getP(FN),
                        'value': '3'
                    },
                    {
                        'x': '模型预测(负)',
                        'y': '实际值(负)',
                        'hehe': TN,
                        '占比': getP(TN),
                        'value': '4'
                    },
                    {
                        'x': '模型预测(负)',
                        'y': '总数',
                        'hehe': postN,
                        '占比': getP(postN),
                        'value': '5'
                    },
                    {
                        'x': '总数',
                        'y': '实际值(正)',
                        'hehe': p,
                        '占比': getP(p),
                        'value': '6'
                    },
                    {
                        'x': '总数',
                        'y': '实际值(负)',
                        'hehe': n,
                        '占比': getP(n),
                        'value': '7'
                    },
                    {
                        'x': '总数',
                        'y': '总数',
                        'hehe': p + n,
                        '占比': '100%',
                        'value': '8'
                    }
                ]
            }
            this.setEvaluationData(data)
        }
    },
    watch: {
        type () {
            this.getData(this.probability)
        },
        probability (val) {
            this.getData(val)
        },
        sample (val) {
            this.getData(val)
        }
    }
}
</script>

<style lang="less" scoped>
.confusion-matrix {
    width: 40%;
}
</style>
